import {StyleSheet} from 'react-native';
import px2dp from '../../utils/px2dp';

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  wrapper_container: {
    height: px2dp(280),
    margin: px2dp(24),
  },
  notice: {
    flexDirection: 'row',
    paddingHorizontal: px2dp(33),
    marginVertical: px2dp(33),
    alignItems: 'center',
  },
  notic_title: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  notice_icon: {
    width: px2dp(24),
    height: px2dp(20),
  },
  notic_text: {
    fontSize: px2dp(24),
    fontWeight: 'bold',
    color: '#333',
    marginLeft: px2dp(9),
  },
  line: {
    width: px2dp(2),
    height: px2dp(22),
    backgroundColor: '#ccc',
    marginHorizontal: px2dp(20),
  },
  notic_info: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  notice_new: {
    width: px2dp(28),
    height: px2dp(19),
  },
  notic_info_text: {
    flex: 1,
    color: '#333',
    fontSize: px2dp(20),
    marginLeft: px2dp(12),
  },
  nav_container: {
    marginTop: px2dp(24),
    flexDirection: 'row',
    paddingHorizontal: px2dp(24),
    justifyContent: 'space-between',
  },
  nav: {
    width: px2dp(220),
    height: px2dp(104),
  },
  gap: {
    height: px2dp(20),
    backgroundColor: 'rgb(250, 250, 250)',
  },
  home_nav_container: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    paddingHorizontal: px2dp(55),
    alignItems: 'center',
    marginBottom: px2dp(20),
  },
  nav_btn: {
    width: px2dp(100),
    alignItems: 'center',
  },
  nav_icon: {
    width: px2dp(83),
    height: px2dp(83),
  },
  nav_title: {
    textAlign: 'center',
    color: '#333',
    fontSize: px2dp(24),
  },
  content_head: {
    flexDirection: 'row',
    alignItems: 'center',
    marginLeft: px2dp(40),
    marginRight: px2dp(34),
    justifyContent: 'space-between',
    height: px2dp(64),
  },
  head_left: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  title_line: {
    width: px2dp(6),
    height: px2dp(30),
    backgroundColor: '#EB0029',
    borderRadius: px2dp(3),
  },
  head_title: {
    marginLeft: px2dp(11),
    color: '#333',
    fontSize: px2dp(28),
    fontWeight: '800',
  },
  head_more: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  more_text: {
    color: '#999',
    fontSize: px2dp(20),
    marginRight: px2dp(12),
  },
  right_icon: {
    width: px2dp(8),
    height: px2dp(12),
  },
  live_container: {
    marginHorizontal: px2dp(30),
  },
  live_list: {
    width: px2dp(171),
    marginHorizontal: px2dp(12),
  },
  live_cover: {
    width: px2dp(171),
    height: px2dp(189),
    backgroundColor: '#f7f7f7',
  },
  start: {
    position: 'absolute',
    left: '50%',
    top: '50%',
    width: px2dp(32),
    height: px2dp(32),
    marginTop: px2dp(-16),
    marginLeft: px2dp(-16),
  },
  live_text: {
    marginTop: px2dp(18),
    color: '#333',
    fontSize: px2dp(18),
    marginBottom: px2dp(28),
    lineHeight: px2dp(26),
  },
  teacher_name: {
    fontSize: px2dp(20),
    color: '#333',
    fontWeight: 'bold',
    marginTop: px2dp(12),
    marginBottom: px2dp(-10),
    textAlign: 'center'
  },
  couse_container: {
    marginHorizontal: px2dp(30),
    flexDirection: 'row',
    flexWrap: 'wrap',
    justifyContent: 'space-between',
  },
  couse_list: {
    width: px2dp(209),
  },
  couse_cover: {
    width: px2dp(209),
    height: px2dp(141),
    backgroundColor: '#f7f7f7',
  },
  couse_tag: {
    position: 'absolute',
    top: 0,
    right: 0,
    backgroundColor: '#EB0029',
    borderBottomLeftRadius: px2dp(4),
  },
  tag_text: {
    color: '#fff',
    fontSize: px2dp(14),
    paddingHorizontal: px2dp(14),
    paddingVertical: px2dp(4),
  },
  couse_text: {
    color: '#333',
    fontSize: px2dp(18),
    lineHeight: px2dp(26),
    marginBottom: px2dp(24),
    marginTop: px2dp(11),
  },
  new_list_one_img: {
    paddingLeft: px2dp(41),
    paddingRight: px2dp(38),
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: px2dp(29),
  },
  new_cover: {
    width: px2dp(202),
    height: px2dp(118),
    backgroundColor: '#f7f7f7',
  },
  new_info_no_img: {
    flex: 1,
    justifyContent: 'space-between',
  },
  new_info: {
    flex: 1,
    height: px2dp(118),
    marginLeft: px2dp(17),
    justifyContent: 'space-between',
  },
  new_title: {
    color: '#333',
    fontSize: px2dp(24),
    lineHeight: px2dp(34),
  },
  new_time: {
    color: '#333',
    fontSize: px2dp(17),
  },
  new_time_no_img: {
    color: '#333',
    fontSize: px2dp(17),
    marginTop: px2dp(16),
  },
  more_img_container: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    marginVertical: px2dp(14),
  },
  new_list_more_img: {
    paddingLeft: px2dp(41),
    paddingRight: px2dp(38),
    marginBottom: px2dp(29),
  },
  star_teach_webview: {
    flex: 1,
    height: px2dp(70),
    marginTop: px2dp(10),
    marginBottom: px2dp(10),
  },
});

export default styles;
